<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="inputContent" clearable @clear="clearContent">
            <el-button slot="append" icon="el-icon-search"  @click="searchContent(inputContent)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAdd">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- table 表格区域 -->
      <el-table :data="goodsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column
          label="商品价格（元）"
          prop="goods_price"
        width="90px"
        ></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="130px">
            <template slot-scope="scope">
                {{scope.row.add_time | dateFormat}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button  type="primary" icon="el-icon-edit" circle></el-button>
            <el-button  type="danger" icon="el-icon-delete" circle @click="removeGood(scope.row.index)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分頁功能 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryInfo: {
        // 查询参数
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      total: 0,
      goodsList: [],
      inputContent:'',
      deepGoodsList: [],
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 根据分页获取对应的商品列表
    async getGoodsList() {
      let { data: res } = await this.$http.get('goods', {
        params: this.queryInfo,
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表失败')
      }
      this.$message.success('获取商品列表成功')
      this.goodsList = res.data.goods
      this.total = res.data.total
      while (this.goodsList.length < this.total) {
        var concatArr = this.$deepClone(this.goodsList);
        concatArr.forEach((item,i,array)=>{
          this.goodsList.push(item)
        });
      }
      var nowpage = this.queryInfo.pagenum;
      var pagesize = this.queryInfo.pagesize;
      // (2 - 1) * 10,  2*10
      // (nowpage - 1) * pagesize, nowpage * pagesize
      this.goodsList = this.goodsList.slice((nowpage - 1) * pagesize, nowpage * pagesize);
      this.goodsList.forEach(function(item,i){
        item.index = i;
      })
      this.deepGoodsList = this.$deepClone(this.goodsList);
    },
    // 每頁顯示條數改變
    handleSizeChange(newsize) {
      debugger
        this.queryInfo.pagesize = newsize;
        this.getGoodsList();
    },

    // 頁碼值改变
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage;
      this.getGoodsList()
    },

    // 清空搜索内容
    clearContent() {
      // this.getGoodsList()
      this.goodsList = this.deepGoodsList;
    },

    // 搜索内容
    searchContent(content) {
      console.log(content, this.goodsList);
      this.goodsList = this.goodsList.filter(function(item) {
        return item.goods_name.indexOf(content.trim()) > -1;
      })

    },

    // 删除商品
    async removeGood(index) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      // 如果用户点击了确认删除，则返回字符串'confirm'
      // 如果用户点击了取消删除，本应该会报错。但是我们进行了catch(err=>{return err}); 此时返回的'cancel'
      if (confirmResult !== 'confirm') return this.$message.info('已取消删除')
      // 没有return 表明点击了确定
      debugger
      this.goodsList = this.goodsList.filter(item=>{
        return item.index !== index;
      })
      this.deepGoodsList = this.deepGoodsList.filter(item=>{
        return item.index !== index;
      })
    },

    // 添加按钮事件
    goAdd() {
      this.$router.push('goodsAdd')
    }
  },
}
</script>
<style lang="less" scoped>
</style>